<template>
    <div>
        <h2>我是Home的内容</h2>
        <router-link class="nav-2" to="/home/news" active-class="active">News</router-link>
        <router-link class="nav-2" to="/home/message" active-class="active">Message</router-link>
        <router-view></router-view>
    </div>
</template>
<script>
import Vue from 'vue';
export default Vue.extend({
    name: 'Home',
    mounted() {
        console.log("Home组件挂载完毕");
        window.homeRoute = this.$route
        window.homeRouter = this.$router
    },
    beforeDestroy() {
        console.log("Home组件即将销毁", this);
    }
})
</script>

<style>
.nav-2 {
    width: 70px;
    height: 20px;
    background-color: rgb(245, 240, 191);
    margin: 4px 0 4px 0;
    border: 2px solid #f6cf81;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.nav-2:hover {
    background-color: orange;
}
</style>